<template>
  <div class="container">
    <el-form :inline="true" :model="queryForm" ref="queryForm">
      <el-form-item style="float: right">
        <el-button v-if="isAuth('sys:menu:add')" type="success" icon="el-icon-plus" size="small" @click="add()">新增</el-button>
      </el-form-item>
      <!--default-expand-all-->
      <el-table
        :data="tableData"
        style="width: 100%;"
        border
        row-key="id"
        v-loading="tableLoading"
        :height="countHeight"
        :tree-props="{children: 'children'}"
      >
        <el-table-column prop="id">
          <template slot-scope="scope"><span v-html=""></span></template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="类型" width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 2" size="small" type="primary" effect="dark"><i class="el-icon-menu"></i>&nbsp;&nbsp;菜单</el-tag>
            <el-tag v-else-if="scope.row.type === 3" size="small" type="warning" effect="dark"><i class="el-icon-set-up"></i>&nbsp;&nbsp;操作</el-tag>
            <el-tag v-else size="small" type="success" effect="dark"><i class="el-icon-folder"></i>&nbsp;&nbsp;目录</el-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" prop="name" label="名称" min-width="160"></el-table-column>
        <el-table-column header-align="center" prop="alias" label="别名" min-width="160"></el-table-column>
        <el-table-column align="center" prop="icon" label="图标" width="70">
          <template slot-scope="scope"><i :class="scope.row.icon"></i></template>
        </el-table-column>
        <el-table-column header-align="center" prop="path" label="菜单路径" min-width="240"></el-table-column>
        <el-table-column header-align="center" prop="perm" label="操作标识" min-width="240"></el-table-column>
        <el-table-column header-align="center" align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="编辑" v-if="isAuth('sys:menu:edit')" placement="top">
              <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row.id, scope.row.type)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" v-if="isAuth('sys:menu:del')" placement="top">
              <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleDel(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <dialog-menu ref="dialogMenu" @refreshData="getDataList"></dialog-menu>
  </div>
</template>
<script>
  import menuDialog from './dialog/menuModule.vue'
  import { isAuth } from '@/utils'

  export default {
    name: 'zb-menu',
    data () {
      return {
        queryForm: {},
        tableData: [],
        tableLoading: false,
      }
    },
    computed: {
      countHeight() {
        return window.screen.availHeight - 300
      }
    },
    activated () {
      this.getDataList()
    },
    methods: {
      getDataList() {
        if (!isAuth('sys:menu:view')) {
          return
        }
        this.tableLoading = true
        this.$http.get(this.$http.adornUrl('/sys/menu/list')).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            this.tableData = result.data
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
          this.tableLoading = false
        }).catch((reason) => {
          this.tableLoading = false
          this.$message({message: reason, type: 'error'})
        })
      },
      add() {
        const params = {type: 'add', menuType: 1, menu: this.tableData}
        this.$nextTick(() => {
          this.$refs['dialogMenu'].init(params)
        })
      },
      handleEdit(id, type) {
        const params = {type: 'edit', id: id, menuType: type, menu: this.tableData}
        this.$nextTick(() => {
          this.$refs['dialogMenu'].init(params)
        })
      },
      handleDel(data) {
        let type = ''
        if (data.type === 1) {
          type = '目录'
        } else if (data.type === 2) {
          type = '菜单'
        } else if (data.type === 3) {
          type = '操作'
        }
        this.$confirm('是否删除' + type + '[' + data.alias + ']?', '提示', {type: 'warning'}).then(() => {
          if (data.children.length > 0) {
            this.$message({message: '删除失败，该' + type + '下有资源未删除！', type: 'error'})
            return
          }
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/info/${data.id}`),
            method: 'delete',
            data: {}
          }).then(response => {
            const result = response.data
            if (result && result.code === 200) {
              this.$message({message: '删除' + result.msg, type: 'success'})
              this.getDataList()
            } else {
              this.$message({message: '删除' + result.msg, type: 'error'})
            }
          }).catch(reason => {
            this.$message({message: reason, type: 'error'})
          })
        }).catch(() => {})
      }
    },
    components: {
      'dialog-menu': menuDialog
    }
  }
</script>
<style>
</style>
